<template>
	<view class="page-container">
		<uni-nav-bar @clickLeft="clickLeft" left-icon="left" title="Login" statusBar="true" />
		<view class="container">
			<tabs :tabs="tabsList" class="tabs-container" :select="select" @onChange="tabChange" />
			<view v-if="select === 0">
				<e-input isNumber placeholder="Mobile Number" @onInput="(e) => getInputInfo({
					type: 'phone',
					label: 'account',
					value: e
				})" class="form-column ">
					<template #icon>
						<picker @change="selectState" @click="pickerClick" :value="index" :range="array">
							<view class="mobile-icon">
								<image class="img" src="./../../static/state.png"></image>
								<span>+91</span>
							</view>
						</picker>
					</template>
				</e-input>
				<view style="height: 1px;"></view>
				<e-input ispassword placeholder="Password" @onInput="(e) => getInputInfo({
					type: 'phone',
					label: 'password',
					value: e
				})" class="form-column">
					<template #icon>
						<image class="img" src="./../../static/password.png"></image>
					</template>
				</e-input>
				<checkbox-group>
					<label class="remember">
						<checkbox />Remember password
					</label>
				</checkbox-group>
			</view>

			<view v-if="select === 1">
				<e-input placeholder="email" @onInput="(e) => getInputInfo({
					type: 'email',
					label: 'account',
					value: e
				})" class="form-column ">
					<template #icon>
						<image class="img" src="./../../static/Email.png"></image>
					</template>
				</e-input>
				<view style="height: 1px;"></view>
				<e-input ispassword placeholder="Password" @onInput="(e) => getInputInfo({
					type: 'email',
					label: 'password',
					value: e
				})" class="form-column">
					<template #icon>
						<image class="img" src="./../../static/password.png"></image>
					</template>
				</e-input>
				<checkbox-group>
					<label class="remember">
						<checkbox />Remember password
					</label>
				</checkbox-group>
			</view>

			<button @click="login" class="login-btn">Login</button>

			<view class="other-btn">
				<view @click="register" class="register-btn btn">
					Register
				</view>
				<view @click="forget" class="forget-password btn">
					Forget Password?
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import tabs from '../../components/tabs/tabs.vue'
	import EInput from '../../components/input/input.vue'
	export default {
		components: {
			tabs,
			EInput
		},
		data() {
			return {
				select: 0,
				index: 0,
				array: ['+91'],
				loginInfo: {
					account: '',
					password: ''
				},
				emailInfo: {
					account: '',
					password: ''
				},
				tabsList: [{
					label: 'Phone Login',
					id: 0
				}, {
					label: 'Email Login',
					id: 1
				}]
			}
		},
		onLoad() {

		},
		methods: {
			tabChange({
				id
			}) {
				this.select = id
			},
			clickLeft() {
				uni.navigateBack(-1)
			},
			pickerClick() {
				const c = document.querySelector('.uni-picker-action.uni-picker-action-cancel')
				if (c) {
					c.innerHTML = 'cancel'
				}
				const co = document.querySelector('.uni-picker-action.uni-picker-action-confirm')
				if (co) {
					co.innerHTML = 'confirm'
				}
			},
			selectState() {
				console.log('+91')
			},
			getInputInfo({
				type,
				label,
				value
			}) {
				if (type === 'phone') {
					this.loginInfo[label] = value
				}
				if (type === 'email') {
					this.emailInfo[label] = value
				}
			},
			login() {
				if (this.select === 0) {
					const {
						account,
						password
					} = this.loginInfo
					if (!account) {
						uni.showToast({
							icon: 'none',
							title: 'Pelese input phone'
						})
						return
					}
					if (!password) {
						return uni.showToast({
							icon: 'none',
							title: 'Pelese input password'
						})
					}
				}
				if (this.select === 1) {
					const {
						account,
						password
					} = this.emailInfo
					if (!account) {
						uni.showToast({
							icon: 'none',
							title: 'Pelese input email'
						})
						return
					}
					if (!password) {
						return uni.showToast({
							icon: 'none',
							title: 'Pelese input password'
						})
					}
				}
				uni.showToast({
					icon: 'none',
					title: 'Account doesn\'t exist'
				})
			},
			register() {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			},
			forget() {
				uni.navigateTo({
					url: '/pages/forget/forget'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;

		.tabs-container {
			margin-bottom: 24px;
		}

		.form-column {
			margin: 12px 0;
		}

		.remember {
			color: #808088;
			font-size: 14px;
		}

		.login-btn {
			margin-top: 20px;
			background-color: #c7984a;
			color: #362109;
		}

		.mobile-icon {
			display: flex;
			align-items: center;
			font-size: 18px;

			>img {
				margin-right: 5px;
			}
		}

		.img {
			width: 24px;
			height: 24px;
		}

		.other-btn {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;

			.btn {
				opacity: .7;
				line-height: 32px;
				font-size: 16px;
				text-decoration: underline;
				border-radius: 4px;
				background-color: #fff;
				padding: 5px 25px;
				color: #362109 !important;
				border: 1px solid #c7984a !important;
			}
		}
	}
</style>
